<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>美多商城-找回密码</title>
    <link rel="stylesheet" type="text/css" href="/static/css/reset.css">
    <link rel="stylesheet" type="text/css" href="/static/css/main.css">
    <script type="text/javascript" src="/static/js/host.js"></script>
    <script type="text/javascript" src="/static/js/vue-2.5.16.js"></script>
    <script type="text/javascript" src="/static/js/axios-0.18.0.min.js"></script>
    <script>
        window.onload = function(){
            var vm = new Vue({
    el: '#app',
    data: {
        host: host,

        image_code_id: '',
        image_code_url: '',

        username: '',
        image_code: '',
        mobile: '',
        access_token: '',
        sms_code: '',
        user_id: '',
        password: '',
        password2: '',

        // 发送短信的标志
        sending_flag: false,

        error_username: false,
        error_image_code: false,
        error_sms_code: false,

        error_username_message: '',
        error_image_code_message: '',
        sms_code_tip: '获取短信验证码',
        error_sms_code_message: '',
        error_password: false,
        error_check_password: false,

        // 控制表单显示
        is_show_form_1: true,
        is_show_form_2: false,
        is_show_form_3: false,
        is_show_form_4: false,

        // 控制进度条显示
        step_class: {
            'step-1': true,
            'step-2': false,
            'step-3': false,
            'step-4': false
        },
    },
    mounted(){
        this.generate_image_code();
        },

    methods: {
        // 生成uuid
        generate_uuid: function(){
            var d = new Date().getTime();
            if(window.performance && typeof window.performance.now === "function"){
                d += performance.now(); //use high-precision timer if available
            }
            var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                var r = (d + Math.random()*16)%16 | 0;
                d = Math.floor(d/16);
                return (c =='x' ? r : (r&0x3|0x8)).toString(16);
            });
            return uuid;
        },
        // 生成一个图片验证码的编号，并设置页面中图片验证码img标签的src属性
        generate_image_code(){
            //生成uuid
            this.uuid = this.generate_uuid();
            this.image_code_url = '/image_codes/' + this.uuid + '/'

        },
        // 检查用户名是否存在
        check_username(){
            let de = /^[a-zA-Z0-9_-]{5,20}$/;
            if (de.test(this.username)==true){
                //先校验是有效的用户名后，再进行判断是否已有，axios来吧
                //1.拼接url
                let url ='usernames/' + this.username + '/count/';
                //2.召唤axios
                axios.get(url,{responseType:'json'}).then(response=>{
                    if (response.data.count >= 1){
                        this.error_username = false;

                    }else {
                        this. error_username_message = '用户名不存在';
                        this.error_username = true;
                    }
                })
            }else{
                this. error_username_message = '请输入5-20个字符的用户名';
                this.error_username = true;
            }
        },
        check_image_code(){
            //非真即假 如果不存在
            if (!this.image_code){
                this.error_image_code_message = '请输入图片验证码';
                this.error_image_code = true;
            }else{
                //如果有数据则执行：
             // this.error_code = false;
                //发起axios到后台redis数据库检测是否存在
                //1拼接url
                let code_url = '/testcode/' + this.uuid + '/';
                //2.axions

                axios.get(code_url,{responseType:"json"}).then(response=>{
                    if (response.data.text == this.image_code.toLocaleLowerCase()){
                        this.error_image_code = false;

                    }else{
                        this.error_image_code_message = '图片验证码输入错误,请您重新输入';
                        this.error_image_code = true;
                    }
                }).catch();
            }
        },
        check_sms_code(){
            if (this.sms_code.length != 4){
                this.error_sms_code_message = '请填写四位数短信验证码';
                this.error_sms_code = true
            }else {
                //如果确实填写了规范的短信验证码
                //判断是否正确 axios
                let check_sms_url = '/check_sms_code/' +this.mobile +'/'+ this.sms_code + '/';
                axios.get(check_sms_url,{responseType:"json"}).then(response=>{
                    if (response.data.ret == 0){
                        //验证成功
                        this.error_sms_code = false;
                        this.step_class['step-3'] = true;
                        this.step_class['step-2'] = false;
                        this.is_show_form_2 = false;
                        this.is_show_form_3 = true;
                    }else {
                        this.error_sms_code_message = '短信验证码输入错误';
                        this.error_sms_code = true;
                    }
                })


            }
        },

        // 第一步表单提交, 获取手机号与发送短信的token
        form_1_on_submit: function(){
            this.check_username();
            this.check_image_code();

            if (this.error_username == false && this.error_image_code == false) {
                let sms_url = '/sms_codes/' + this.username +'/?code=' + this.image_code +'&uuid='+ this.uuid;
                axios.get(sms_url,{
                        responseType: 'json'
                    })
                    .then(response => {
                    this.mobile = response.data.mobile;
                    // this.access_token = response.data.access_token;
                    this.step_class['step-2'] = true;
                    this.step_class['step-1'] = false;
                    this.is_show_form_1 = false;
                    this.is_show_form_2 = true;
                    })
            }
        },

        // 第二步
        // 发送短信验证码
        send_sms_code(){
            //点击按钮就检查这两项， 手机号和验证码是否正确，如果不正确则返回
            // if (this.sending_flag == true){
            //     return
            // }
            //运行一次变为真,下次则不能再发起请求了，避免重复发送
            // this.sending_flag = true;
            //验证通过就发送短信验证码，通过axios
            //拼接url   通过查询传参数 手机号 图片验证码 uuid
            let sms_url = this.host +'/login/sms_codes/' + this.mobile +'/';
            axios.get(sms_url,{responseType:'json'}).then(response=>{
                if (response.data.code1 == '0'){
                    //发送成功 ,开始倒计时5分钟
                    let num = 300;
                    let t = setInterval(()=>{
                        if (num == 1){
                            clearInterval(t);
                            this.sms_code_tip = '获取短信验证码';
                            //表示可以再次发送
                            this.sending_flag = false;
                    }else {
                            num = num-1;
                            this.sms_code_tip = '请在'+ num + '秒内输入';

                        }
                    },1000);

                }
                else if (response.data.code1 == '4004'){
                        //表示验证码失效了
                        this.error_sms_code_message = response.data.errmsg;
                        this.error_sms_code = true
                    }
                else if (response.data.code1 == '4001'){
                        this.error_sms_code_message = response.data.errmsg;
                        this.error_sms_code = true;
                    }
                else if (response.data.code1 == '2'){
                    this.error_sms_code_message = response.data.errmsg;
                    this.error_sms_code = true;
                }
            }).catch()
        },
        // 第二步表单提交，验证短信验证码
        form_2_on_submit: function(){
            this.check_sms_code();
        },

        // 第三步
        check_pwd: function (){
           let de = /^[a-zA-Z0-9_-]{8,20}$/;
            if (de.test(this.password)){
// {#                匹配上不显示#}
                this.error_password = false;
            }else{
                this.error_password = true;
            }
        },
        check_cpwd: function (){
            if(this.password!=this.password2) {
                this.error_check_password = true;
            } else {
                this.error_check_password = false;
            }
        },
        form_3_on_submit: function(){
            this.check_pwd();
            this.check_cpwd();
            if (this.error_password == false && this.error_check_password == false) {
                axios.post(this.host + '/users/'+ this.username +'/password/', {
                        password: this.password,
                        password2: this.password2,
                        // access_token: this.access_token
                    }, {
                        responseType: 'json'
                    })
                    .then(response => {
                        this.step_class['step-4'] = true;
                        this.step_class['step-3'] = false;
                        this.is_show_form_3 = false;
                        this.is_show_form_4 = true;
                        if (response.data.code1 == '0'){
                            let num = 4;
                            let t = setInterval(()=>{
                                if (num == 1){
                                    location.href = '/login/';
                                    clearInterval(t);
                                }else {
                                    num = num-1;
                                }},1000)






                    }})

                    .catch(error => {
                        alert(error.response.data.message);
                        console.log(error.response.data);
                    })
            }
        }
    }
})
        }
    </script>
</head>
<body>
    <div class="find_header">
        <img src="/static/images/logo.png">
        <span class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;找回密码</span>
    </div>

    <div class="find_form" id="app" v-cloak>
        <div class="step" v-bind:class="step_class"></div>
        <!-- 第一步的表单 -->
        <form class="form_step" v-show="is_show_form_1" v-on:submit.prevent="form_1_on_submit">
            <div class="form_group">
                <label>账号名：</label>
                <input v-model="username" @blur="check_username" type="text" name="username" class="input_txt">
                <span v-show="error_username" class="error">{{ error_username_message }}</span>
            </div>
            <div class="form_group">
                <label>验证码：</label>
                <input v-model="image_code" v-on:blur="check_image_code" type="text" name="img_code" class="input_txt input_txt2">
                <img v-bind:src="image_code_url" v-on:click="generate_image_code" alt="图形验证码" class="pic_code">
                <span v-show="error_image_code" class="error">{{ error_image_code_message }}</span>
            </div>
            <div class="form_group">
                <input type="submit" value="下一步" class="input_sub">
            </div>
        </form>

        <!-- 第二步的表单 -->
        <form class="form_step" v-show="is_show_form_2" v-on:submit.prevent="form_2_on_submit">
            <div class="form_group">
                <label>手机号：</label>
                <input v-model="mobile" type="text" name="mobile" class="input_txt" disabled>
            </div>
            <div class="form_group">
                <label>短信验证码：</label>
                <input v-model="sms_code" v-on:blur="check_sms_code" type="text" name="code" class="input_txt input_txt2">
                   <a v-on:click="send_sms_code" class="phone_code">{{ sms_code_tip }}</a>
                <span v-show="error_sms_code" class="error">{{ error_sms_code_message }}</span>
            </div>
            <div class="form_group">
                <input type="submit" value="下一步" class="input_sub">
            </div>
        </form>

        <!-- 第三步的表单 -->
        <form class="form_step" v-show="is_show_form_3" v-on:submit.prevent="form_3_on_submit">
            <div class="form_group">
                <label>新密码：</label>
                <input v-model="password" v-on:blur="check_pwd" type="password" name="pwd" class="input_txt">
                <span v-show="error_password" class="error">请输入正确的密码</span>
            </div>
            <div class="form_group">
                <label>再次输入：</label>
                <input v-model="password2" v-on:blur="check_cpwd" type="password" name="cpwd" class="input_txt">
                <span v-show="error_check_password" class="error">两次输入的密码不一致</span>
            </div>
            <div class="form_group">
                <input type="submit" value="下一步" class="input_sub">
            </div>
        </form>

        <!-- 第四部提示 -->
        <div class="pass_change_finish" v-show="is_show_form_4">密码设置成功！</div>

    </div>

    <div class="footer no-mp">
            <div class="foot_link">
                <a href="#">关于我们</a>
                <span>|</span>
                <a href="#">联系我们</a>
                <span>|</span>
                <a href="#">招聘人才</a>
                <span>|</span>
                <a href="#">友情链接</a>
            </div>
            <p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
            <p>电话：010-****888    京ICP备*******8号</p>
        </div>
{#    <script type="text/javascript" src="/static/js/find_password.js"></script>#}
</body>
</html>